/**
 * 用来弹出一级分类里面二级分类的信息
 */

// 记录当前触摸li的下标
let li_index = -1

// 记录每一个li标签的原始css属性
const li_old_color =  $('#category > ul > li')[0].style.color
const li_old_bcolor =  $('#category > ul > li')[0].style.backgroundColor

 // 给每一个li添加触摸事件，发ajax请求，数据放在二级分类中
$.each($('#category > ul > li'),(index,item)=>{
    

    // 为每一个li添加触摸事件
    $(item).on('mouseenter',function(){
        // 记录当前当前触摸的li的下标    
        li_index = index
        
        // 准备字符串拼接
        let id_str = ''
        const li_len= $(this).children.length - 1

        $('span').remove('#category_title > span')
        
        // 准备一个list
        let catIds = new Array()
        // 遍历每一个a标签
        $.each(item.children,(index,item)=>{
        	// 先去掉href属性中前面的pt,转换成数字
        	const num = parseInt($(item).attr('href').slice(9))
        	console.log('num:'+num)
        	catIds.push(num)
            // 设置弹出盒子里的标题
            $('#category_title').append('<span>'+item.innerText+'</span>')
        })
        
        var catIdsJSON = JSON.stringify(catIds)
        
        $.post(
             'getcategory',
             {'bookCategoryId':catIdsJSON},
             data=>{
                 // 拿到数据后，把数据填充到二级分类里面                
                 var temp = eval("(" + data + ")");
                 console.log(temp);
                 
                 // 先清空
                 $('div').remove('#category_content > div')
                 
                 $.each(temp,(index,ins)=>{
                	 // 创造标题
                     const rank = '<p>'+ins.name+'</p>'
                     // 三级分类
                     let three_category = ''
                     $.each(ins.children,function(){
                    	 three_category += '<li><a href="category/'+this.id+'">'+this.name+'</a></li>'
                     })
                     console.log("二级分类标题："+rank)
                     // 添加div
                     $('#category_content').append('<div>'+rank+'<ul>'+three_category+'</ul></div>')
                 })
                 
             }
         )
        // 让二级分类显示
    })   
})

// 给二级分类添加鼠标移入移出事件，保存li的触摸状态
$('#category > div').on('mouseenter',()=>{
    if(li_index != -1){
        // 设置li的css样式
        $.each($('#category > ul > li')[li_index].children,(index,item)=>{
            item.style.color = 'white'
        })
        $('#category > ul > li')[li_index].style.color = 'white'
        $('#category > ul > li')[li_index].style.backgroundColor = 'gainsboro' 
    }
}).on('mouseleave',()=>{
    // 还原li的css样式
    if(li_index != -1){
        // 设置li的css样式
        $.each($('#category > ul > li')[li_index].children,(index,item)=>{
            item.style.color = li_old_color
        })
        $('#category > ul > li')[li_index].style.color = li_old_color
        $('#category > ul > li')[li_index].style.backgroundColor = li_old_bcolor
    }
})